<template>
  <div>
    <div class="flex items-center mb-13px">
      <img :src="HighestIcon" alt="" />
      <span class="ml-5px text-18px text-white tracking-wider font-medium">热销排行榜</span>
    </div>
    <div class="w-240px h-406px bg-mask-shallow-white-2 py-11px px-11px">
      <div
        v-for="(item, index) in list.highest"
        :key="item.id"
        class="relative flex items-center"
        :class="{ 'mb-31px': index !== list.highest.length - 1 }"
      >
        <div
          class="w-70px h-70px rounded-6px mr-14px cursor-pointer"
          style="flex-shrink: 0"
          @click="godetail(item)"
        >
          <img class="w-full h-full rounded-6px" :src="item.imgs?.[0]?.url" alt="" />
        </div>
        <div>
          <div
            class="text-16px leading-24px text-white mb-3px cursor-pointer"
            @click="godetail(item)"
          >
            {{ item.name }}
          </div>
          <div class="flex items-center">
            <div
              v-for="label in item.sell_point?.slice(0, 2)"
              :key="label"
              class="rounded-2px px-4px mr-8px h-18px leading-18px"
              style="
                background-color: rgba(218, 191, 50, 0.15);
                color: rgba(255, 237, 143, 0.8);
                flex-shrink: 0;
              "
            >
              <n-ellipsis style="max-width: 64px">
                {{ label }}
              </n-ellipsis>
            </div>
          </div>
          <div class="mt-7px text-12px" style="color: rgba(255, 255, 255, 0.6)">
            已售{{ item.sales }}
          </div>
        </div>
        <div v-if="index === 0" class="absolute -left-5px -top-7px">
          <img :src="Hot1Icon" alt="" />
        </div>
        <div v-if="index === 1" class="absolute -left-5px -top-7px">
          <img :src="Hot2Icon" alt="" />
        </div>
        <div v-if="index === 2" class="absolute -left-5px -top-7px">
          <img :src="Hot3Icon" alt="" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// import { onMounted, ref } from 'vue'
import HighestIcon from '@renderer/assets/highest.svg'
import Hot1Icon from '@renderer/assets/hot1.svg'
import Hot2Icon from '@renderer/assets/hot2.svg'
import Hot3Icon from '@renderer/assets/hot3.svg'
import { useListStore } from '@renderer/store/modules/list'
import { useRouter } from 'vue-router'
const list = useListStore()
const router = useRouter()
const godetail = (item) => {
  router.push({ name: 'Detail', params: { id: item.id }, query: { combo: 0 } })
}
</script>

<style scoped></style>
